<template>
  <view
    class="layout-main"
    :style="{height: windowHeight, width: windowWidth}"
  >
    <view class="layout-main__wrapper" :style="{paddingTop: top + 'px'}">
      <slot></slot>
    </view>
    <d-navbar />
  </view>
</template>

<script lang="ts" setup>
defineOptions({ name: 'LayoutMain' })

// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo
let top = 0

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
    top: systemInfo.safeArea.top,
    right: systemInfo.windowWidth - systemInfo.safeArea.right,
    bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
    left: systemInfo.safeArea.left,
  }
  : null
top = safeAreaInsets?.top || 0
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

const windowHeight = uni.getWindowInfo().windowHeight + 'px'
const windowWidth = uni.getWindowInfo().windowWidth + 'px'
</script>

<style lang="scss" scoped>
.layout-main {
  height: 100vh;
  width: 100%;
  position: relative;
  padding-bottom: var(--navbar-height);

  .layout-main__wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
  }
}
</style>
